<template>
  <button @click="isShow = !isShow">Toggle</button>

  <!-- :css="false" 忽略之前设置的css -->
  <transition @enter="enter" @leave="leave" :css="false">
    <div class="title" v-if="isShow">前程似锦</div>
  </transition>
</template>
<script setup>
import gsap from "gsap";
import { ref } from "vue";
const isShow = ref(true);

// 进入
function enter(el, done) {
  console.log("enter");
  // 达到某个状态
  // gsap.to()
  // 从哪个
  gsap.from(el, {
    scale: 0,
    x: 200,
    onComplete: done,
  });
}

// 离开
function leave(el, done) {
  console.log("leave");
  gsap.to(el, {
    scale: 0,
    x: 200,
    onComplete: done,
  });
}
</script>
<style scoped>
.title {
  display: inline-block;
  background-color: aqua;
}
</style>
